<template>
  <div class="userrole">
    <el-scrollbar height="260px">
      <el-row>
        <el-col :span="24">
          <el-checkbox-group
            v-model="pageData.cbGroupParams.cbChecked"
            size="small"
          >
            <el-checkbox
              class="role-checkbox"
              v-for="item in pageData.cbGroupParams.cbData"
              :label="item.fuserid"
              :key="item.fuserid"
              border
              >{{ item.ffullname }}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button
          :v-if="pageData.permissions.BindRole"
          type="primary"
          @click="onHandleSure"
          >确 定</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, nextTick, reactive, toRefs } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import utils from "@/common/utils";
// import enums from "@/common/enums";
// const lodash = require("lodash");

import { getRoleList, getRoleListByUserId, setRoleUser } from "@/api/system";

export default {
  name: "UserRole",
  components: {},
  props: {
    orgObj: { type: Object, required: true },
    userObj: { type: Object, required: true },
  },
  setup(props, context) {
    onMounted(() => {
      nextTick(() => {
        // const p1 = getRoleListByType(props.orgObj.forgid, props.orgObj.funittypeid);
        const p1 = getRoleList();
        const p2 = getRoleListByUserId(props.userObj.fuserid);
        Promise.all([p1, p2])
          .then(([ret1, ret2]) => {
            console.log("object1", ret1);
            console.log("object2", ret2);
            pageState.pageData.cbGroupParams.cbData = ret1;
            pageState.pageData.cbGroupParams.cbChecked = ret2.map(
              (p) => p.fuserid
            );
          })
          .catch((error) => {
            ElMessage.error(error.message || "请求出错");
          });
      });
    });

    const pageState = reactive({
      pageData: {
        permissions: {
          BindRole: utils.checkPermission("sysuser_bindrole"),
        },
        cbGroupParams: {
          cbData: [],
          cbChecked: [],
        },
      },
    });
    const pageFunc = {
      onHandleCancel: () => {
        context.emit("cancel");
      },
      onHandleSure: () => {
        const loading = ElLoading.service({
          lock: true,
          background: "rgba(0, 0, 0, 0.7)",
        });
        // 角色权限配置 测通
        setRoleUser({
          userid: props.userObj.fuserid,
          roleids: pageState.pageData.cbGroupParams.cbChecked,
        })
          .then((res) => {
            // console.log("first", res);
            loading.close();
            context.emit("ok");
          })
          .catch((error) => {
            loading.close();
            ElMessage.error(error.message || "请求出错");
          });
      },
    };

    return {
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>

<style lang="scss">
.userrole {
  height: 100%;
  background-color: white;
  .role-checkbox {
    padding: 0 5px;
    margin: 0 10px 10px 0 !important;
  }
}
</style>
